import React, { Component } from "react"
import Headcom from "../../components/header"
import "./index.css"

import {getCollectlist,delCollect} from "../../api/user"

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            isShow: false,
            isCheck: false
        }
    }

    checkHandl(index,ev) {
        ev.stopPropagation();
        this.state.list[index].check = !this.state.list[index].check;
        this.setState({
            list: this.state.list,
            isCheck: this.state.list.every(item => item.check)
        })

    }

    allCheckHandl(){
        this.setState({
            isCheck:!this.state.isCheck
        },()=>{
            this.state.list.forEach(item=>item.check=this.state.isCheck);
            this.setState({
                list: this.state.list
            })
        })
    }

    delHandl(){
        let data = this.state.list.filter(item=>item.check);
        let ids = [];
        if(data.length===0){
            alert("请选择")
        }else{
            data.forEach(item=>{
                ids.push(item.id)
            })
  
            delCollect({
                ids:ids.join(",")
            }).then(res=>{
                if(res.data.code===0){
                    this.setState({
                        list:this.state.list.filter(item=>item.check===false)
                    })
                }
            })
        }
    }

    componentDidMount(){
        let {id} = JSON.parse(localStorage.getItem("userinfo"))
        getCollectlist(id)
        .then(res=>{
            res.data.forEach(item=>{
                item.check = false
            })
            this.setState({
                list:res.data
            })
        })
    }


    render() {
        return (
            <div className="mycollection">
                <Headcom title="我的收藏" />
                <div className="top">收藏夹
                     <span onClick={() => { this.setState({ isShow: !this.state.isShow }) }}>{this.state.isShow ? "完成" : "管理"}</span>
                </div>
                <ul>
                    {this.state.list.map((item, index) => {
                        return <li key={item.id} 
                                   onClick={()=>{this.props.history.push("/detail/"+item.productid)}}>
                            <img src={item.imgurl} alt="" />
                            <p>{item.title}</p>
                            <span>￥{item.price.toFixed(2)}</span>
                            {this.state.isShow ? <i className={item.check ? "active" : ""} onClick={this.checkHandl.bind(this, index)}></i> : null}

                        </li>
                    })}

                </ul>
                {
                    this.state.isShow ? <div className="bot">
                        <span onClick={this.allCheckHandl.bind(this)}><i className={this.state.isCheck ? "active" : ""}></i>全选</span>
                        <em onClick={this.delHandl.bind(this)}>删除</em>
                    </div> : null
                }

            </div>
        )
    }
}

export default Index;